<template>
 <view class="content-navbar-box " >
  <view class="content-navbar" 
  :style="{backgroundImage: `url(${getImg('votion_form_headr_back_image.svg')})`}" >
    <u-navbar  :titleStyle ="{color: navTitleColor}" :leftIconColor="navTitleColor"  
      title="问卷调查" :placeholder="true" :bgColor="navColor" :autoBack="true">
     <view slot="left" @click="handleBack">
      <u-icon  :name="isFirstPage?'home':'arrow-left'" :color="navTitleColor" size="24"></u-icon>
     </view>
    </u-navbar>
      <view class="content-navbar-lable">{{voteInfo.voteTitle}}</view>
      <view class="content-navbar-content">
         <view class="content-navbar-content-item">
          
           <view class="content-navbar-content-item-content">
            <!-- 在规定的时间内收集业主的意见，参与户数不低于快速决议范围户数 -->
             <view class="content-navbar-content-item-content-label">发起方</view>
             <view class="content-navbar-content-item-content-label bold">{{voteInfo.initiator}}</view>
           
           </view>
         </view>
      </view>
      
  </view>
</view>
</template>

<script>
import votion_form_headr_left_button from '@/static/votion_form_headr_left_button.svg'
import votion_form_headr_right_button from '@/static/votion_form_headr_right_button.svg'

export default {
  name: "Head",
  props: {
    scrollTop: {
      type: Number,
      default: 0
    },
    voteInfo:{
      type: Object,
      default: () => {}
    },
  
    VotingratioInfo: {
      type: Object,
      default: () => {}
    },
    recordId: {
      type: Number,
      default: 0
    },
    communityId: {
      type: Number,
      default: 0
    },
    voteId: {
      type: Number,
      default: 0
    },
    isFirstPage: {
      type: Boolean,
      default: false
    },
    isVotingInfo: {
      deep:true,
      immediate:true,
      type: Object,
      default: () => {}
    },
    ratio: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
        buttons:[
            {
                name:'投票说明',
                icon:votion_form_headr_left_button,
                isArrow:false
                
            },
            {
                name:"投票检验",
                icon:votion_form_headr_right_button,
                isArrow:true
            }
            
        ]
    }
  },
  computed: {
    navColor() {
      return this.scrollTop === 0 ? 'rgba(0,0,0,0)' : `rgba(255,255,255,${this.scrollTop/100})`
    },
    navTitleColor() {
      return this.scrollTop === 0 ? '#ffffff' : '#333333';
    }
  },
  methods:{
    handleBack(){
      if(this.isFirstPage){
        uni.switchTab({
          url:`/pages/home/index?communityId=${this.communityId}`
        })
      }else{
        uni.navigateBack()
      }
    },
    async handleClick(item){
      let res=await this.$store.dispatch("community/checkLoginAndBoundHouses")
     
     if(!res) return
      if(item.name=="投票说明"){
        
        uni.navigateTo({
          url:`/pages/votingIns/index?voteId=${this.voteId}&sumTotalPerson=${this.VotingratioInfo.sumTotalPerson}&sumTotalSize=${this.VotingratioInfo.sumTotalSize}`
        })
      }else if(item.name=="投票检验"){

        if(!this.isVotingInfo.isVoting){
          uni.showToast({
            title:"您还未投票，不能进行投票检验",
            icon:"none"
          })
          return
        }
        uni.navigateTo({
          url:`/pages/certificate/index?title=${item.name}&recordId=${this.recordId}&communityId=${this.communityId}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content-navbar-box{
    width: 100%;
}
.content-navbar {
  width: 100%;
  padding: 0 30rpx 0rpx 30rpx;
  background-size: cover;
  height: 474rpx;

    &-lable{
       font-weight: 550;
        font-size: 36rpx;
        color: #FFFFFF; 
        margin:16rpx 0 30rpx 0;
        padding:0 4rpx
    }
    &-content{
      width: 100%;
      padding:15rpx 38rpx;
      background-color: #fff;
      border-radius: 18rpx;
      &-item{
        &-title{
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
        }
        &-content{  
          font-weight: 400;
          font-size: 26rpx;
          color: #8f8f8f;
          margin-top: 10rpx;
        }
        // background-color: #98b2eb;
        // border-radius: 18rpx;
        // padding: 10rpx 20rpx;
        // margin-bottom: 10rpx;
      }
    }
   
  
}
.content-navbar-content-item-content-label{
  color: #333333;
}


</style>
